<template>
  <div class="history-page">
    <header class="page-header">
      <back-icon />
      <div class="title">历史记录</div>
      <router-link to="/coupon-center" class="more-coupons">领券中心</router-link>
    </header>

    <div class="history-list">
      <div 
        v-for="record in historyRecords" 
        :key="record.id"
        class="history-item"
      >
        <div class="record-header">
          <span class="record-date">{{ record.date }}</span>
          <span :class="['record-status', record.status]">{{ getStatusText(record.status) }}</span>
        </div>
        
        <div class="record-content">
          <div class="discount-info">
            <span class="discount-amount">{{ record.amount }}元</span>
            <span class="discount-condition">{{ record.condition }}</span>
          </div>
          
          <div class="record-details">
            <p class="validity">有效期：{{ record.validityPeriod }}</p>
            <p class="source">来源：{{ record.source }}</p>
          </div>
        </div>
      </div>
    </div>

    <div v-if="historyRecords.length === 0" class="empty-state">
      暂无历史记录
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import BackIcon from '@/components/BackIcon.vue'

const historyRecords = ref([])

const getStatusText = (status) => {
  const statusMap = {
    used: '已使用',
    expired: '已过期',
    invalid: '已作废'
  }
  return statusMap[status] || status
}

// 模拟获取历史记录数据
const fetchHistoryRecords = async () => {
  // API调用
}

onMounted(async () => {
  // 模拟API调用
  historyRecords.value = [
    {
      id: 1,
      date: '2024-03-15',
      status: 'used',
      amount: 50,
      condition: '满199元可用',
      validityPeriod: '2024-03-01 至 2024-03-15',
      source: '618购物节'
    },
    {
      id: 2,
      date: '2024-03-10',
      status: 'expired',
      amount: 100,
      condition: '满299元可用',
      validityPeriod: '2024-03-01 至 2024-03-10',
      source: '新人专享'
    },
    // 添加更多模拟数据...
  ]
})
</script>

<style scoped>
.history-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 44px;
  gap: 12px;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  margin-right: 32px;
}

.more-coupons {
  color: #ff6b81;
  text-decoration: none;
  font-size: 14px;
}

.history-item {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.record-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.record-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.record-status.used {
  background: #e6f7ff;
  color: #1890ff;
}

.record-status.expired {
  background: #f5f5f5;
  color: #999;
}

.record-status.invalid {
  background: #fff2f0;
  color: #ff4d4f;
}

.discount-info {
  margin-bottom: 10px;
}

.discount-amount {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b81;
  margin-right: 10px;
}

.discount-condition {
  color: #666;
}

.record-details {
  font-size: 14px;
  color: #999;
}

.record-details p {
  margin: 5px 0;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #999;
}

@media (max-width: 768px) {
  .history-page {
    padding: 10px;
  }
  
  .history-item {
    padding: 10px;
  }
  
  .discount-amount {
    font-size: 20px;
  }
}
</style> 